<template>
	<view class="publish">
		<view class="publish-header">
			<ul>
				<li v-for="(item,i) in list" @click="addBtn(i,item)" :class="index==i?'active':''">
					<text>{{item.text}}</text>
				</li>
			</ul>
		</view>
		<view class="publish-baner">
			<view class="line">
				——— <text>推薦</text> ———
			</view>
			<view class="publish-list">
				<ul>
					<li v-for="(item, index) in publicList" @click="addJumpDetail(item)">
						<view class="list-con">
							<view class="list-img">
								<image :src="item.iconUrl" mode=""></image>
							</view>
							<div class="list-text">
								<div class="list-name">
									<p>{{index+1}}.{{item.title}}</p>
								</div>
								<div class="list-author">
									<text>{{item.author}}</text>
									<div class="boxAll">
										<div class="box">{{item.category}}</div>
										<div class="box">{{item.showTotalCount}}</div>
									</div>
								</div>
								<div class="list-detail">
									<text v-html="item.description"></text>
								</div>
							</div>
						</view>
					</li>
				</ul>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		getPublish
	} from '@/api/index.js';
	export default {
		data() {
			return {
				index: 0,
				isShow: true,
				publicList: [],
				list: [{
						text: '日榜',
						type: 'day'
					},
					{
						text: '周榜',
						type: 'week'
					},
					{
						text: '月榜',
						type: 'month'
					}
				]
			}
		},
		onLoad() {
			uni.showLoading({
				title:'正在加载中...'
			})
			getPublish(this.list[0].type).then(content => {
				console.log(content);
					let {
						code,
						data: {
							books
						}
					} = content;
					this.publicList = books;
					uni.hideLoading()
				})
				.catch(error => {
					console.log(error);
				})
		},
		methods: {
			async addBtn(i, item) {
				this.index = i;
				uni.showLoading({
					title:'加载中',
				})
				await getPublish(item.type).then(content => {
						let {
							code,
							data: {
								books
							}
						} = content;
						if(books){
							this.publicList = books;
						}
						console.log(books);
						uni.hideLoading();
					})
					.catch(error => {
						console.log(error);
					})
					
			},
		
		addJumpDetail(item){
			console.log(item);
			this.book_id = item.sourceUrl.slice(8);
			console.log(this.book_id);
			this.category = item.category;
			this.description = item.description
			let data = {
				'id': this.book_id,
				'category': this.category,
				'description': this.description
			}
				uni.navigateTo({
					url: '../detail/detail?data=' + encodeURIComponent(JSON.stringify((data)))
				})
		}
		
		}

	}
</script>

<style lang="scss">
	.publish {
		background-image: url("../../static/background-image.png");
		left: -10px;
		top: 0px;
		width: 100%;
		opacity: 1;
		overflow: hidden;

		.publish-header {
			width: 90%;
			height: 150rpx;
			opacity: 0.75;
			margin: 40rpx auto 0;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			background: rgba(190, 145, 97, 1);
			box-shadow: 0px 0px 0px 0px rgba(74, 17, 25, 0.1);

			ul {
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
				list-style: none;
				display: flex;
				align-items: center;
				justify-content: space-evenly;

				li {
					width: 150rpx;
					height: 58rpx;
					background-color: #fceccc;
					color: rgba(89, 89, 89, 1);
					border-radius: 15px;
					text-align: center;
					line-height: 58rpx;
					font-size: 14px;
					border: 1px solid #fd6537;

					&.active {
						background-color: #fd6537;
						color: #fceccc;
						transition: all .3s;
						border: 1px solid #fd6537;
					}
				}
			}
		}

		.publish-baner {
			width: 100%;
			background-color: #fceccc;
			overflow: hidden;

			.line {
				width: 500rpx;
				margin: 30rpx auto;
				text-align: center;
				color: rgba(166, 166, 166, 1);

				text {
					color: #000;
					padding: 0 30rpx;
					font-size: 17px;
				}
			}

			.publish-list {
				width: 100%;

				ul {
					width: 90%;
					padding: 0;
					margin: 40rpx auto 0;
					list-style: none;

					li {
						width: 100%;
						height: 280rpx;
						// background-color: pink;
						margin-bottom: 60rpx;
						box-sizing: border-box;

						.list-con {
							display: flex;
							width: 100%;
							height: 100%;

							.list-img {
								width: 480rpx;
								height: 100%;

								image {
									width: 200rpx;
									height: 100%;
									border-radius: 20rpx;
									border: 1px solid #fd6143;

								}
							}

							.list-text {
								margin: 0 20rpx 0 40rpx;
								width: 1000rpx;
								height: 100%;
								overflow: hidden;
								.list-name {
									margin: 5rpx 0 12rpx 0;
									p {
										font-family: '苹方';
										font-size: 18px;
										font-weight: 600;
										color: rgba(59, 59, 59, 1);
										text-overflow: ellipsis;
										overflow: hidden;
										word-break: break-all;
										white-space: nowrap;
									}
								}
							}

							.list-author {
								display: flex;
								width: 100%;
								flex-direction: column;
								// align-items: center;
								flex-wrap: wrap;

								text {
									width: 100%;
									font-size: 14px;
									color: rgba(168, 168, 168, 1);
									text-overflow: ellipsis;
									overflow: hidden;
									word-break: break-all;
									white-space: nowrap;
								}
								.boxAll{
									width: 100%;
									display: flex;
									.box {
										padding: 5rpx 10rpx;
										background-color: #fce2b2;
										font-size: 10px;
										// font-weight: 600;
										border-radius: 10rpx;
										color: rgba(119, 130, 138, 1);
										text-align: center;
										line-height: 28rpx;
										border: 1px solid #fd6143;
										margin-right: 20rpx;
										margin-left: 5rpx;
										margin-top: 25rpx;
									}
								}
								
							}

							.list-detail {
								margin: 20rpx 0 0;
								font-size: 15px;
								color: rgba(119, 130, 138, 1);

								text {
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
								}
							}
						}
					}
				}

			}

		}

	}
</style>